<template>
    <AbsoluteContainer>
        <div class="alarm">
            <page-header title="当前停电" />
            <page-main>
                <!-- 表格搜索行 -->
                <el-form ref="searchForm" :model="searchForm" :inline="true">
                    <el-form-item label="站点" prop="siteid">
                        <el-input
                            v-model="searchForm.siteid"
                            placeholder="输入站点查询"
                            clearable
                            size="small"
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item label="卡号" prop="phone">
                        <el-input
                            v-model="searchForm.phone"
                            placeholder="输入卡号查询"
                            clearable
                            size="small"
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>

                    <el-form-item label="市电状态" prop="power">
                        <el-select
                            v-model="searchForm.power"
                            placeholder="选择市电状态查询"
                            clearable
                            size="small"
                        >
                            <el-option
                                v-for="dict in powerStatusOptions"
                                :key="dict.dictValue"
                                :label="dict.dictLabel"
                                :value="dict.dictValue"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="油机状态" prop="oilset">
                        <el-select
                            v-model="searchForm.oilset"
                            placeholder="选择油机状态查询"
                            clearable
                            size="small"
                        >
                            <el-option
                                v-for="dict in oilsetStatusOptions"
                                :key="dict.dictValue"
                                :label="dict.dictLabel"
                                :value="dict.dictValue"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="设备状态" prop="devstatus">
                        <el-select
                            v-model="searchForm.devstatus"
                            placeholder="选择设备状态查询"
                            clearable
                            size="small"
                        >
                            <el-option
                                v-for="dict in devStatusOptions"
                                :key="dict.dictValue"
                                :label="dict.dictLabel"
                                :value="dict.dictValue"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            icon="el-icon-search"
                            size="mini"
                            @click="initPage"
                        >
                            搜索
                        </el-button>
                        <el-button
                            icon="el-icon-refresh"
                            size="mini"
                            @click="handleReset"
                        >
                            重置
                        </el-button>
                    </el-form-item>
                </el-form>
                <el-row>
                    <el-button
                        icon="el-icon-download"
                        size="mini"
                        type="success"
                        style="margin-bottom: 10px;"
                        @click="handleExport"
                    >
                        导出
                    </el-button>
                </el-row>
                <el-row>
                    <el-badge :value="10" :max="99" class="itembadge">
                        <el-button size="small">停电</el-button>
                    </el-badge>
                    <el-badge :value="5" :max="10" class="itembadge">
                        <el-button size="small">发电</el-button>
                    </el-badge>
                </el-row>

                <el-table
                    ref="alarmTable"
                    :data="recordList"
                    :header-cell-style="{
                        background: '#eef1f6',
                        color: '#606266'
                    }"
                    style="width: 100%; overflow-y: auto; margin-top: 20px;"
                    :row-style="{ height: '35px' }"
                    :cell-style="{ padding: '0' }"
                    border
                    stripe
                    highlight-current-row
                    :default-sort="{
                        prop: 'powervalue',
                        order: 'descending'
                    }"
                >
                    <el-table-column prop="siteid" label="站点" min-width="50">
                        <template slot-scope="scope">
                            {{ scope.row.siteid }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="phone"
                        :show-overflow-tooltip="true"
                        label="卡号"
                        min-width="50"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.phone }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="power"
                        :show-overflow-tooltip="true"
                        label="市电状态"
                        min-width="30"
                    >
                        <template slot-scope="scope">
                            <span>
                                {{
                                    (scope.row.power !== null &&
                                        getLabel(
                                            scope.row.power,
                                            powerStatusOptions
                                        )) ||
                                        "-"
                                }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="powervalue"
                        :show-overflow-tooltip="true"
                        label="市电电压"
                        min-width="50"
                        sortable
                    >
                        <template slot-scope="scope">
                            {{ scope.row.powervalue }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="oilset"
                        label="油机状态"
                        min-width="30"
                    >
                        <template slot-scope="scope">
                            <span>
                                {{
                                    (scope.row.oilset !== null &&
                                        getLabel(
                                            scope.row.oilset,
                                            oilsetStatusOptions
                                        )) ||
                                        "-"
                                }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="oilsetvalue"
                        label="油机电压"
                        min-width="50"
                        sortable
                    >
                        <template slot-scope="scope">
                            <span>{{ scope.row.oilsetvalue }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="devstatus"
                        :show-overflow-tooltip="true"
                        label="设备状态"
                        min-width="30"
                    >
                        <template slot-scope="scope">
                            <span>
                                {{
                                    (scope.row.devstatus !== null &&
                                        getLabel(
                                            scope.row.devstatus,
                                            devStatusOptions
                                        )) ||
                                        "-"
                                }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="recordtime"
                        label="记录时间"
                        min-width="120"
                    >
                        <template slot-scope="scope">
                            <span>{{
                                parseDateFull(scope.row.recordtime)
                            }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </page-main>
        </div>
    </AbsoluteContainer>
</template>

<script>
import api from "@/api";
// import { timeFormatConvert } from "@/util/index";
export default {
    data() {
        return {
            date: "",
            countupdate: 0,
            tasknum: "",
            recordList: [],
            searchForm: {},
            powerStatusOptions: [
                { dictValue: 0, dictLabel: "停电" },
                { dictValue: 1, dictLabel: "有电" },
                { dictValue: 2, dictLabel: "缺相" },
                { dictValue: 3, dictLabel: "波动" }
            ],
            oilsetStatusOptions: [
                { dictValue: 0, dictLabel: "空闲" },
                { dictValue: 1, dictLabel: "发电" },
                { dictValue: 2, dictLabel: "异常" }
            ],
            devStatusOptions: [
                { dictValue: 0, dictLabel: "正常" },
                { dictValue: 1, dictLabel: "硬件异常" },
                { dictValue: 2, dictLabel: "网络异常" },
                { dictValue: 3, dictLabel: "性能异常" }
            ],
            startTime: new Date(new Date().getTime() - 600000),
            endTime: new Date()
        };
    },
    computed: {
        getLabel() {
            return (val, list) => {
                let obj = "";
                obj = list.find(item => item.dictValue == val);
                return obj.dictLabel;
            };
        }
    },
    mounted() {
        // vue页面刚加载时自动执行
        this.initPage();
        this.getData();
        this.$nextTick(() => {
            // 获取表头高度，然后设置 .el-table__body-wrapper 的 height
            let height = document.getElementsByClassName(
                "el-table__header-wrapper"
            )[0].offsetHeight;
            document.getElementsByClassName(
                "el-table__body-wrapper"
            )[0].style.height = `calc(100% - ${height}px)`;
        });
        // if (this.timer) {
        //     clearInterval(this.timer);
        // } else {
        //     this.timer = setInterval(() => {
        //         this.updateTable();
        //     }, 15000);
        // }
    },
    destroyed() {
        clearInterval(this.timer);
    },
    methods: {
        initPage: function() {
            console.log("初始化数据");
            // this.startTime = timeFormatConvert(this.startTime);
            // this.startTime = timeFormatConvert(this.endTime);
            let params = Object.assign(
                {
                    page: 1,
                    size: 20,
                    token: this.$store.state.user.token
                    // recordtime__gte: "2022-02-01 00:00:00",
                    // recordtime__lte: "2022-02-17 14:20:29"
                    // recordtime__gte: this.startTime,
                    // recordtime__lte: this.startTime
                },
                this.searchForm
            );
            var that = this;
            api.get("/electricApi/datarecord/", {
                params: params
            }).then(function(response) {
                console.log(response.results);
                that.recordList = response.results.filter(
                    item => item.power == 0
                );
                console.log("市电状态power为0的数据", that.recordList);
            });
        },
        // 正在发电
        getData() {
            // let that = this;
            let params = {
                page: 1,
                page_size: 500,
                token: this.$store.state.user.token,
                siteid: "site0001"
            };
            api.get("/electricApi/dataelectric/", { params: params }).then(
                function(response) {
                    console.log(
                        "正在发电的数据",
                        response.results.filter(item => item.endtime == null)
                    );
                    // that.recordList = response.results;
                }
            );
        },
        updateTable() {
            console.log("局部刷新");
            var that = this;
            that.countupdate++;
            api.get("/electricApi/datarecord/").then(function(response) {
                console.log(response);
                that.recordList = response.results;
            });
        },

        dateNow: function() {
            var t = new Date();
            this.date =
                t.getFullYear() +
                "-" +
                (t.getMonth() + 1) +
                "-" +
                t.getDate() +
                " " +
                t.getHours() +
                ":" +
                t.getMinutes() +
                ":" +
                t.getSeconds();
        },
        parseDateFull(time) {
            var x = new Date(time);
            var z = {
                y: x.getFullYear(),
                M: x.getMonth() + 1,
                d: x.getDate(),
                h: x.getHours(),
                m: x.getMinutes(),
                s: x.getSeconds()
            };
            if (z.M < 10) {
                z.M = "0" + z.M;
            }
            if (z.d < 10) {
                z.d = "0" + z.d;
            }
            if (z.h < 10) {
                z.h = "0" + z.h;
            }
            if (z.m < 10) {
                z.m = "0" + z.m;
            }
            return z.y + "-" + z.M + "-" + z.d + " " + z.h + ":" + z.m;
        },
        handleReset() {
            this.searchForm = {};
            this.initPage();
        },
        handleExport() {
            alert("开发中");
        }
    }
};
</script>

<style lang="scss" scoped>
.alarm {
    height: 90vh;
    overflow: scroll;
}
.page-main {
    display: flex;
    flex-direction: column;

    // 减去的 40px 为 page-main 的上下 margin
    // 减去的 130px 为 page-header 的高度，如果没有设置，可以去掉

    //height: calc(100% - 40px);加页头前的高度
    height: calc(100% - 105px);
    ::v-deep .el-table {
        height: 100%;
        .el-table__body-wrapper {
            overflow-y: auto;
        }
    }
}
.task {
    float: left;
    margin-right: 15px;
}
.itembadge {
    margin-right: 1vw;
}
</style>
